<script setup lang="ts">
import Write from './components/Write.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { saveArticleApi, getArticleByIdApi } from '@/api/article'
import { ArticleItem } from '@/api/article/types'
import { useEventBus } from '@/hooks/event/useEventBus'
import { ElMessage } from 'element-plus'

const { emit } = useEventBus()

const { push, go } = useRouter()

const { query } = useRoute()

const { t } = useI18n()

const currentRow = ref<Nullable<ArticleItem>>(null)

const getTableDet = async () => {
  const res = await getArticleByIdApi(query.id as string)
  if (res) {
    res.data.imageList &&
      (res.data.imageList = res.data.imageList.split(',').reduce((arr, v) => {
        console.log(v)

        arr.push({
          url: 'http://127.0.0.1:9527/' + v
        })
        return arr
      }, []))

    currentRow.value = res.data
  }
}

getTableDet()

const writeRef = ref<ComponentRef<typeof Write>>()

const loading = ref(false)

const save = async () => {
  const write = unref(writeRef)
  const formData = await write?.submit()
  if (formData) {
    loading.value = true
    await saveArticleApi(formData)
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })

    ElMessage({
      type: 'success',
      message: '修改成功！',
      duration: 1500,
      onClose: () => {
        emit('getList', 'edit')
        push('/article/index')
      }
    })
  }
}
</script>

<template>
  <ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')">
    <Write ref="writeRef" :current-row="currentRow" />

    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="save">
        {{ t('exampleDemo.save') }}
      </BaseButton>
    </template>
  </ContentDetailWrap>
</template>
@/hooks/event/useEventBus
